<template>
    <bi-input v-model="value" :before-width="beforeWidth" :loading="changeParent" :readonly="route_type=='default'"   :placeholder="placeholderList[route_type]" >
        <template #before>
            <bi-select ref="select" v-if="!changeParent"  handle-type="button" v-model="route_type"  option-width="self"  handle-class="dropdown-toggle" >
                <bi-select-option label="默认" value="default" ></bi-select-option>
                <bi-select-option label="/" value="root"  ></bi-select-option>
                <bi-select-option :label="parentUrl + '/'" value="parent" v-if="parentUrl!=''" ></bi-select-option>
                <bi-select-option label="链接" value="link" v-if="link" ></bi-select-option>
            </bi-select>
        </template>
    </bi-input>
</template>


<script>
import fieldMixin from  '@@/admin/assets/bi-plug/fieldMixin.js';
export default{
    mixins:[fieldMixin],
    props:{
        type:{
            type:String,
            default:'default'
        },
        parentPart:{
            type:[String,Number],
            default:''
        },
        link:{
            type:Boolean,
            default:true
        }
    },
    emits:['update:type'],
    data()
    {

        let placeholderList = {};
        placeholderList['default'] = '默认不用填写';
        placeholderList['root'] = '请输入路由';
        placeholderList['parent'] ='请输入下一级路由';
        placeholderList['link'] = '请输入链接,http://或者https://开头';

        return {
            placeholderList,
            beforeWidth:0,
            changeParent:false,
            parentUrl:'',
            oldValue:'',
            oldType:''
        }
    },
    watch:{
        parentPart:{
            handler(val){
                this.parentUrl = '';
                if (val!='' &&  parseInt(val)!='0'){
                    this.changeParent = true;
                    this.$ajax({
                        url:this.$url({app:'web',controller:'admin.part',action:'route'}),
                        data:{
                            part:this.parentPart
                        },
                        success:(data)=>{
                            this.parentUrl = data.route;

                            this.$nextTick(()=>{
                                this.changeParent = false;
                                    this.$nextTick(()=>{
                                        this.updateWidth();
                                    });
                            });
                        }
                    })
                }
            },
            immediate:true
        }
    },
    computed:{
        route_type:{
            get(){
                return this.type;
            },
            set(val){
                 if (val=='default' && this.value!='' ){
                    this.oldValue = this.value;
                    this.value = '';
                }else{
                    if (this.oldValue!=''){
                        this.value = this.oldValue;
                        this.oldValue = '';
                    }
                }
                
                this.$emit('update:type',val);
            }
        }
    },
    methods:{
        updateWidth(){
            if (this.$refs.select){
                this.beforeWidth = this.$refs.select.$el.offsetWidth +10;
            }
        },
        test(){
            this.route_type = 'link';
        }
    },
    updated(){
        this.updateWidth();
    },
    mounted(){
        this.updateWidth();
    }
}


</script>